<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <header>
        <span><a href="http://baidu.com"><img src="baidu.png" alt="baidu"></a></span>
        <ul>
            <li><a href="index.html">导航链接1</a></li>
            <li><a href="index.html">导航链接2</a></li>
            <li><a href="index.html">导航链接3</a></li>
            <li><a href="index.html">导航链接4</a></li>
        </ul>
    </header>
    <main>

        <section class="sec1">
            <h2>文章一级标题</h2>
            <h3>文章二级标题</h3>
            <span>文章作者</span>
            <span>文章发表时间</span>
            <p>这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a></p>
            <img src="http://i1.piimg.com/567571/de5fe587470b66d9.jpg" alt="图片">
        </section>
        <section class="sec2">
            <h2>另一篇文章一级标题</h2>
            <h2>文章二级标题</h2>
            <span>文章作者</span>
            <span>文章发表时间</span>
            <p>这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a></p>
            <img src="http://i1.piimg.com/567571/de5fe587470b66d9.jpg" alt="图片">
            <ul>
                <li>列表项目11</li>
                <li>列表项目12</li>
                <li>列表项目13</li>
            </ul>
        </section>
        <section class="sec3">
            <h2>图片</h2>
            <dl>

                <dd>
                    <p>好看的图片</p><img src="http://i1.piimg.com/567571/de5fe587470b66d9.jpg" alt="图片"></dd>

                <dd>
                    <p>好看的图片</p><img src="http://i1.piimg.com/567571/de5fe587470b66d9.jpg" alt="图片"></dd>

                <dd>
                    <p>好看的图片</p><img src="http://i1.piimg.com/567571/de5fe587470b66d9.jpg" alt="图片"></dd>

                <dd>
                    <p>好看的图片</p><img src="http://i1.piimg.com/567571/de5fe587470b66d9.jpg" alt="图片"></dd>
            </dl>
        </section>
        <section class="sec4">
            <h2>最后一篇文章标题</h2>
            <h2>文章二级标题</h2>
            <span>文章作者</span>
            <span>文章发表时间</span>
            <ol>
                <li>排名1</li>
                <li>排名2</li>
                <li>排名3</li>
            </ol>
            <p>下面是一个表格，给表格加一个border="1"好让你看出是一个表格</p>
            <table border="1" bgcolor="#abcedr">
                <thead>
                    <tr>
                        <th>表头</th>
                        <th>表头</th>
                        <th>表头</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="">操作</a></td>
                    </tr>
                    <tr>
                        <td>总计</td>
                        <td colspan="2">1000</td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </section>
        <section class="sec5">
            <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
            <h2>侧栏注册窗口标题</h2>
            <form action="index.html" method="POST">
                <div class="email"><label for="email">请输入邮箱地址：</label><input type="email" name="email" id="email" placeholder="这是一个文本输入框"></div>
                <div class="password"><label for="password">请输入密码：</label><input type="password" name="password" id="password" placeholder="这是一个文本输入框">
                    <label for="repassword">请重复输入密码：</label><input type="password" name="password" id="repassword" placeholder="这是一个文本输入框">
                </div>
                <div class="sex">性别：<input type="radio" name="man" id="man" value="man" checked>男<input type="radio" name="man" id="woman"
                        value="woman">女</div>
                <div class="city">
                    城市：
                    <select>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="深圳">深圳</option>
                
            </select>
                </div>
                <div class="hobby">
                    爱好：
                    <input type="checkbox" name="sport" id="sport" checked>运动
                    <input type="checkbox" name="art" id="art">艺术
                    <input type="checkbox" name="science" id="science">科学
                </div>
                <p>个人描述： </p>
                <div class="textarea"><textarea name="TEXT" id="TEXT" cols="30" rows="10"> 多行文本，注意和 type=text的区别</textarea></div>
                <div class="submit"><input type="submit" value="确认提交"></div>


            </form>
        </section>
    </main>
    <footer>
        <span>版权所有&copy;</span>
    </footer>







</body>

</html>